﻿@model CinemaMaestro.WebApplication.Models.MovieViewModels
<link href="~/Content/RotatingCardFont.css" rel="stylesheet">
<link href="~/Content/RotatingCardFont1.css" rel="stylesheet">
<link href="~/Content/RotatingCard.css" rel="stylesheet">
<script src="~/Scripts/jquery-3.1.1.js"></script>
<style>
    body {
        font-family: 'Arima Madurai', cursive;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
    }

    .preview {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    @@media screen and (max-width: 996px) {
        .preview {
            margin-bottom: 20px;
        }
    }

    .preview-pic {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .preview-thumbnail.nav-tabs {
        border: none;
        margin-top: 15px;
    }

        .preview-thumbnail.nav-tabs li {
            width: 18%;
            margin-right: 2.5%;
        }

            .preview-thumbnail.nav-tabs li img {
                max-width: 100%;
                display: block;
            }

            .preview-thumbnail.nav-tabs li a {
                padding: 0;
                margin: 0;
            }

            .preview-thumbnail.nav-tabs li:last-of-type {
                margin-right: 0;
            }

    .tab-content {
        overflow: hidden;
    }

        .tab-content img {
            width: 100%;
            -webkit-animation-name: opacity;
            animation-name: opacity;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
        }

    .card {
        margin-top: 50px;
        background: #eee;
        padding: 3em;
        line-height: 1.5em;
    }

    @@media screen and (min-width: 997px) {
        .wrapper {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
    }

    .details {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .colors {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .product-title, .price, .sizes, .colors {
        text-transform: UPPERCASE;
        font-weight: bold;
    }

        .checked, .price span {
            color: #6ea1ce;
        }

    .product-title, .rating, .product-description, .price, .vote, .sizes {
        margin-bottom: 15px;
    }

    .product-title {
        margin-top: 0;
    }

    .size {
        margin-right: 10px;
    }

        .size:first-of-type {
            margin-left: 40px;
        }

    .color {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        height: 2em;
        width: 2em;
        border-radius: 2px;
    }

        .color:first-of-type {
            margin-left: 20px;
        }

    .add-to-cart, .like {
        background: #ff9f1a;
        padding: 1.2em 1.5em;
        border: none;
        text-transform: UPPERCASE;
        font-weight: bold;
        color: #fff;
        -webkit-transition: background .3s ease;
        transition: background .3s ease;
    }

        .add-to-cart:hover, .like:hover {
            background: #b36800;
            color: #fff;
        }

    .not-available {
        text-align: center;
        line-height: 2em;
    }

        .not-available:before {
            font-family: fontawesome;
            content: "\f00d";
            color: #fff;
        }

    .orange {
        background: #ff9f1a;
    }

    .green {
        background: #85ad00;
    }

    .blue {
        background: #0076ad;
    }

    .tooltip-inner {
        padding: 1.3em;
    }

    @@-webkit-keyframes opacity {
        0% {
            opacity: 0;
            -webkit-transform: scale(3);
            transform: scale(3);
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @@keyframes opacity {
        0% {
            opacity: 0;
            -webkit-transform: scale(3);
            transform: scale(3);
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    /*# sourceMappingURL=style.css.map */
</style>
@if(Model != null )
{
<div class="container">
    <div class="card">
        <div class="container-fliud">
            <div class="wrapper row">
                <div class="preview col-md-6">

                    <div class="preview-pic tab-content">
                        <div class="tab-pane active" id="pic-1"><img src="@Model.Image" /></div>
                    </div>
                </div>
                <div class="details col-md-6">
                    <h3 class="product-title">@Model.Title</h3>

                    <p class="product-description">@Model.Description</p>
                    <h4 class="price">Duration: <span>@Model.Duration</span></h4>
                    <h4 class="price">Release date: <span>@Model.ReleaseDate.ToString("dd MMMM yyyy")</span></h4>
                    <h4 class="price">
                        @{
                            if (@Model.Categories.Count > 1)
                            {
                                Write("Categories: ");
                                for (var i = 0; i < Model.Categories.Count - 1; i++)
                                { <span>@Model.Categories.ToList()[i].Name, </span> } <span>@Model.Categories.ToList()[Model.Categories.Count - 1].Name </span>
                            }
                            else
                            {
                                Write("Category: ");
                                foreach (var category in Model.Categories)
                                {
                                    <span>@category.Name</span> }
                            }
                        }
                    </h4>
                    <h4 class="price">
                        @{
                            if (@Model.Directors.Count > 1)
                            {
                                Write("Directors: ");
                                for (var i = 0; i < Model.Directors.Count - 1; i++)
                                { <span>@Model.Directors.ToList()[i].FirstName @Model.Directors.ToList()[i].LastName, </span> } <span>@Model.Directors.ToList()[Model.Directors.Count - 1].FirstName @Model.Directors.ToList()[Model.Directors.Count - 1].LastName</span>
                            }
                            else
                            {
                                Write("Director: ");
                                foreach (var director in Model.Directors)
                                {
                                    <span>@director.FirstName @director.LastName</span> }
                            }
                        }
                    </h4>
                    <button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-default" style="background-color:#6ea1ce; color:white; "> Book now </button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .odd {
            background-color: #f6f6f5;
        }

        .even {
            background-color: #fbfbfb;
        }
    </style>
    <div class="card">
        <div class="container-fliud">
            <div class="wrapper row">
                <div class="details col-md-6">
                    <h3 class="product-title">Cast</h3>
                    <table>
                        <tbody>
                            @for (var j = 0; j < Model.Actors.Count; j++)
                            {
                                <tr>
                                    <td><div class="tab-pane" id="pic-2" style="display:inline-flex; align-items:center; padding-top:2em;"><img style="width:50px; height:60px;" src="data:image/jpg;base64,@Convert.ToBase64String(Model.Actors.ToList()[j].Image)" /></div></td>
                                    <td><div style="display:inline-flex; align-items:center;"><h4 class=" price" style="padding-left:2em;"><span>@Model.Actors.ToList()[j].FirstName @Model.Actors.ToList()[j].LastName</span></h4></div></td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    function getData() {
        $('#sel4').empty();
        $('#sel3').empty();
        $('#ticketNr').val(0);
        $('#discountedticketNr').val(0);
        $('#labelTicket').text("Tickets: ");
        $('#labelDiscountedTicket').text("Discounted tickets: ");

        var cinemaId = document.getElementById("sel1").value;
        var data = {"cinemaId": cinemaId, "movieId": @Model.Id};
        $.ajax({
            type: "POST",
            url: "/Home/GetData",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (Data) {
                // Parse the returned json data
                // Use jQuery's each to iterate over the opts value
                $('#sel3').append('<option value=""></option>');
                $.each(Data, function (i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#sel3').append('<option value="' + d.ScreeningId + '">' + formatDate(new Date(parseInt(d.StartDate.substr(6)))) + '</option>');
                });
            }
        });
    }

    function formatDate(date) {
        var year = date.getFullYear(),
            month = date.getMonth() + 1, // months are zero indexed
            day = date.getDate(),
            hour = date.getHours(),
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourFormatted = hour % 12 || 12, // hour returned in 24 hour format
            minuteFormatted = minute < 10 ? "0" + minute : minute,
            morning = hour < 12 ? "am" : "pm";

        return day + "/" + month + "/" + year + " " + hourFormatted + ":" +
                minuteFormatted + morning;
    }

    function getLanguage() {
        $('#sel4').empty();
        $('#labelTicket').text("Tickets: ");
        $('#labelDiscountedTicket').text("Discounted tickets: ");
        var screeningId = document.getElementById("sel3").value;
        var data = { "screeningId": screeningId };
        $.ajax({
            type: "POST",
            url: "/Home/GetLanguage",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (Data) {
                // Parse the returned json data
                // Use jQuery's each to iterate over the opts value
                $.each(Data, function (i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#inputLanguage').val(d.LanguageName);
                    $('#inputAvailableTicket').val(d.AvailableTicket);
                    $('#labelTicket').text("Tickets (Price: " + d.Ticket + "): ");
                    $('#labelDiscountedTicket').text("Discounted tickets (Price: " + d.DiscountedPrice + "): ");
                });
            }
        });
    }
</script>

    <link href="~/Scripts/jquerySeat/jquery.seat-charts.css" rel="stylesheet">
    <script src="~/Scripts/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="~/Scripts/jquerySeat/jquery.seat-charts.js"></script>
    <style>
        .frontt {
            width: 300px;
            margin: 5px 32px 45px 32px;
            background-color: #f0f0f0;
            color: #666;
            text-align: center;
            padding: 3px;
            border-radius: 5px;
        }

        div.seatCharts-cell {
            color: #182C4E;
            height: 25px;
            width: 25px;
            line-height: 25px;
            margin: 3px;
            float: left;
            text-align: center;
            outline: none;
            font-size: 13px;
        }

        div.seatCharts-seat {
            color: #fff;
            cursor: pointer;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        div.seatCharts-row {
            height: 35px;
        }

        div.seatCharts-seat.available {
            background-color: green;
        }

        div.seatCharts-seat.focused {
            background-color: lightgreen;
            border: none;
        }

        div.seatCharts-seat.selected {
            background-color: blue;
        }

        div.seatCharts-seat.unavailable {
            background-color: red;
            cursor: not-allowed;
        }

        div.seatCharts-container {
            border-right: 1px dotted #adadad;
            width: 400px;
            padding: 20px;
            float: left;
        }

        div.seatCharts-legend {
            padding-left: 0px;
            position: absolute;
        }

        ul.seatCharts-legendList {
            padding-left: 0px;
        }

        .seatCharts-legendItem {
            float: left;
            width: 90px;
            margin-top: 10px;
            line-height: 2;
        }

        span.seatCharts-legendDescription {
            margin-left: 5px;
            line-height: 30px;
        }

        .checkout-button {
            display: block;
            width: 80px;
            height: 24px;
            line-height: 20px;
            margin: 10px auto;
            border: 1px solid #999;
            font-size: 14px;
            cursor: pointer;
        }

        #selected-seats {
            max-height: 150px;
            overflow-y: auto;
            overflow-x: none;
            width: 200px;
        }
    </style>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Reservation</h3>
            </div>
            <div class="modal-body">

                <!-- content goes here -->
                <form>
                    <div class="form-group">
                        <div class="form-group">
                            <label for="inputMovie">Movie</label>
                            <input type="text" class="form-control" id="inputMovie" value="@Model.Title" disabled="disabled">
                            <input type="hidden" value="@Model.Id" class="movieId" />
                        </div>

                        <div class="form-group">
                            <label for="sel1">Cinema: </label>
                            <select class="form-control" id="sel1" onchange="getData()">
                                <option></option>
                                @{
                                    var businessUoW = CinemaMaestro.Common.IocContainer.Resolver.Get<CinemaMaestro.BusinessLayer.BusinessObjectFactory>();
                                    var list = businessUoW.Screenings.Read().ToList().Where(screening => screening.Movie.Title == Model.Title && screening.StartDate >= DateTime.Now).Select(x => new { x.Room.Cinema.Id, x.Room.Cinema.Name });


                                    foreach (var cinema in list.Distinct())
                                    {
                                        <option value="@cinema.Id">@cinema.Name</option>
                                    }
                                }
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="sel3">Date: </label>
                            <select class="form-control" id="sel3" onchange="getLanguage()">
                                <option></option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="inputLanguage">Language: </label>
                            <input type="text" class="form-control" id="inputLanguage" value="" disabled="disabled">
                        </div>

                        <div class="form-group">
                            <label id="labelAvailableTicket" for="inputAvailableTicket">Available tickets: </label>
                            <input class="form-control" id="inputAvailableTicket" type="number" disabled="disabled" value="0" />
                        </div>

                        <div class="form-group">
                            <label id="labelTicket" for="ticketNr">Tickets: </label>
                            <input class="form-control" id="ticketNr" type="number" min="0" value="0" />
                        </div>

                        <div class="form-group">
                            <label id="labelDiscountedTicket" for="discountedticketNr">Discounted tickets: </label>
                            <input class="form-control" id="discountedticketNr" type="number" min="0" value="0" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="showSeats" class="btn btn-group-justified btn-info">Next</button>
                <br />
                <button class="btn btn-group-justified btn-default" data-dismiss="modal"> Close </button>
            </div>
        </div>
    </div>
</div>

    <!--MODAL3 line modal -->
    <div class="modal fade" id="squarespaceModal2" tabindex="-1" role="dialog" aria-labelledby="lineModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                    <h3 class="modal-title" id="lineModalLabel">Reservation</h3>
                </div>
                <div class="modal-body">

                    <!-- content goes here -->
                    <form>
                        <div class="demo">
                            <div id="seat-map">
                                <div class="frontt">SCREEN</div>
                            </div>
                            <div id="selectedSeats">
                                <ul id="selected-seats" hidden="hidden"></ul>
                            </div>
                            <!--<div class="booking-details">
                                <div id="legend"></div>
                            </div>-->
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <div id="legend"></div>
                    <br />
                    <!--<button id="saveImage" class="btn btn-group-justified btn-info"> Save </button>-->
                    <button class="btn btn-group-justified btn-info">Next</button>
                    <br />
                    <button class="btn btn-group-justified btn-prev"> Prev </button>
                </div>
            </div>
        </div>
    </div>

<!--MODAL2 line modal -->
<div class="modal fade" id="squarespaceModal1" tabindex="-1" role="dialog" aria-labelledby="lineModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Details</h3>
            </div>
            <div class="modal-body">

                <!-- content goes here -->
                <form>
                    <div class="form-group">
                        <div class="form-group">
                            <label for="inputName">First name</label>
                            <input type="text" class="form-control" id="inputName" value="" name="firstname">
                        </div>

                        <div class="form-group">
                            <label for="inputLastName">Last name</label>
                            <input type="text" class="form-control" id="inputLastName" value="" name="lastname">
                        </div>

                        <div class="form-group">
                            <label for="inputEmail">Email</label>
                            <input type="email" class="form-control" id="inputEmail" value="" name="email">
                        </div>

                        <div class="form-group">
                            <label for="inputTelephone">Telephone</label>
                            <input type="tel" class="form-control" id="inputTelephone" value="" name="telephone">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveReservation" type="submit" class="btn btn-group-justified btn-info"> Save </button>
                <br />
                <button class="btn btn-group-justified btn-prev"> Prev </button>
                <br />
                <button id="buttonCloseModal" class="btn btn-group-justified btn-default" data-dismiss="modal"> Close </button>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/bootstrapmodal.min.js"></script>
<script>
    $("div[id^='squarespaceModal']").each(function () {

        var currentModal = $(this);

        //click next
        currentModal.find('.btn-info').click(function () {

            if(currentModal.attr("id") == "squarespaceModal" )
            {
                var cinemaId = document.getElementById("sel1").value;
                var screeningId = document.getElementById("sel3").value;
                var ticket = document.getElementById("ticketNr").value;
                var discountedTicket = document.getElementById("discountedticketNr").value;
                if (cinemaId && screeningId)
                {
                    if (ticket != 0 || discountedTicket != 0)
                    {
                        currentModal.modal('hide');
                        currentModal.closest("div[id^='squarespaceModal']").nextAll("div[id^='squarespaceModal']").first().modal('show');
                    }
                    else {
                        alert("Please select at least one ticket!")
                    }
                }
                else {
                    alert("Please select a cinema and a date!")
                }
            }
            else if (currentModal.attr("id") == "squarespaceModal2" ) {
                var lis = document.getElementById("selectedSeats").getElementsByTagName("li");
                var ticketNr = document.getElementById("ticketNr").value;
                var discountedTicketNr = document.getElementById("discountedticketNr").value;
                if(lis.length < (parseInt(ticketNr) + parseInt( discountedTicketNr)))
                    alert("Number of selected seats is not equal with selected tickets!")
                else{
                    currentModal.modal('hide');
                    currentModal.closest("div[id^='squarespaceModal']").nextAll("div[id^='squarespaceModal']").first().modal('show');
                }
            }
            else{
                var screeningId = document.getElementById("sel3").value;
                var ticketNr = document.getElementById("ticketNr").value;
                var discountedTicketNr = document.getElementById("discountedticketNr").value;
                var firstName = document.getElementById("inputName").value;
                var lastName = document.getElementById("inputLastName").value;
                var email = document.getElementById("inputEmail").value;
                var telephone = document.getElementById("inputTelephone").value;

                var regexEmail = /^(([^<>()\[\]\\.,;:\s@@"]+(\.[^<>()\[\]\\.,;:\s@@"]+)*)|(".+"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                var regexTel = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
                var regexName = /^[a-z ,.'-]+$/i;

                var lis = document.getElementById("selectedSeats").getElementsByTagName("li");
                var selectedSeats = "";
                for (var i = 0; i < lis.length; i++)
                {
                    selectedSeats = selectedSeats + lis[i].innerText + ",";
                }

                if(regexName.test(firstName))
                {
                    if(regexName.test(lastName))
                    {
                        if(regexEmail.test(email))
                        {
                            if(regexTel.test(telephone))
                            {
                                var data = { "screeningId": screeningId, "ticketNr": ticketNr, "discountedTicketNr": discountedTicketNr, "name": firstName+" "+lastName, "email": email, "telephone":telephone, "reservatedSeats": selectedSeats };
                                $.ajax({
                                    type: "POST",
                                    url: "/Home/CreateReservation",
                                    data: JSON.stringify(data),
                                    contentType: "application/json; charset=utf-8",
                                    success: function (Data) {
                                        if (Data)
                                        {
                                            alert("Reservation has been placed.");
                                            currentModal.modal('hide');
                                            clearElements();
                                        }
                                        else
                                        {
                                            alert("There are not enought available seats!");
                                            currentModal.modal('hide');
                                            clearElements();
                                        }
                                    }
                                });
                            }
                            else
                            {
                                alert("Please enter a valid telephone number!");
                            }
                        }
                        else
                        {
                            alert("Please enter a valid email address!");
                        }
                    }
                    else
                    {
                        alert("Please enter a valid last name!");
                    }
                }
                else
                {
                    alert("Please enter a valid first name!");
                }

            }
        });

        //click prev
        currentModal.find('.btn-prev').click(function () {
            currentModal.modal('hide');
            currentModal.closest("div[id^='squarespaceModal']").prevAll("div[id^='squarespaceModal']").first().modal('show');
        });

    });

    $('#squarespaceModal').on('shown.bs.modal', function (e) {
        $('body').removeClass('modal-open');
        $('body').addClass('modal-open');
    });

    $('#squarespaceModal1').on('shown.bs.modal', function (e) {
        $('body').removeClass('modal-open');
        $('body').addClass('modal-open');
    });

    /*$('#saveReservation').on("click", function (e) {
        var screeningId = document.getElementById("sel3").value;
        var ticketNr = document.getElementById("ticketNr").value;
        var discountedTicketNr = document.getElementById("discountedticketNr").value;
        var firstName = document.getElementById("inputName").value;
        var lastName = document.getElementById("inputLastName").value;
        var email = document.getElementById("inputEmail").value;
        var telephone = document.getElementById("inputTelephone").value;

        var regexEmail = /^(([^<>()\[\]\\.,;:\s@@"]+(\.[^<>()\[\]\\.,;:\s@@"]+)*)|(".+"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var regexTel = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
        var regexName = /^[a-z ,.'-]+$/i;

        if(regexName.test(firstName))
        {
            if(regexName.test(lastName))
            {
                if(regexEmail.test(email))
                {
                    if(regexTel.test(telephone))
                    {
                        var data = { "screeningId": screeningId, "ticketNr": ticketNr, "discountedTicketNr": discountedTicketNr, "name": firstName+" "+lastName, "email": email, "telephone":telephone };
                        $.ajax({
                            type: "POST",
                            url: "/Home/CreateReservation",
                            data: JSON.stringify(data),
                            contentType: "application/json; charset=utf-8",
                            success: function (Data) {
                                if (Data)
                                {
                                    alert("Reservation has been placed.");
                                    currentModal.modal('hide');
                                }
                                else
                                {
                                    alert("There are not enought available seats!");
                                    currentModal.modal('hide');
                                }
                            }
                        });
                    }
                    else
                    {
                        alert("Please enter a valid telephone number!");
                    }
                }
                else
                {
                    alert("Please enter a valid email address!");
                }
            }
            else
            {
                alert("Please enter a valid last name!");
            }
        }
        else
        {
            alert("Please enter a valid first name!");
        }
    });*/
    function clearElements(){
        $('#sel1').val("");
        $('#sel3').empty();
        $('#ticketNr').val(0);
        $('#discountedticketNr').val(0);
        $('#labelTicket').text("Tickets: ");
        $('#labelDiscountedTicket').text("Discounted tickets: ");
        $('#inputLanguage').val("");
        $('#inputAvailableTicket').val("");
        $('#inputName').val("");
        $('#inputLastName').val("");
        $('#inputEmail').val("");
        $('#inputTelephone').val("");
}
</script>
    <script>
    var price = 10; //price
    //$('#squarespaceModal2').on('shown.bs.modal', function () {
    $('#showSeats').click(function () {

        var screeningId = document.getElementById("sel3").value;
        var roomSeat = "";

        var data = { "screeningId": screeningId };
        $.ajax({
            type: "POST",
            url: "/Home/GetRoomSeats",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (Data) {
                roomSeat = Data;
                var roomMap = roomSeat.split(",");
                var $cart = $('#selected-seats'), //Sitting Area
                $counter = $('#counter'), //Votes
                $total = $('#total'); //Total money

                var sc = jQuery('#seat-map').seatCharts({
                    map: roomMap,
                    naming: {
                        top: false,
                        getLabel: function (character, row, column) {
                            return column;
                        }
                    },
                    legend: { //Definition legend
                        node: $('#legend'),
                        items: [
                            ['a', 'available', 'Available'],
                            ['a', 'unavailable', 'Sold'],
                            ['b', 'selected', 'Selected']
                        ]
                    },
                    click: function () { //Click event
                        if (this.status() == 'available') { //optional seat
                            var ticketNr = parseInt(document.getElementById("ticketNr").value);
                            var discountedTicketNr = parseInt(document.getElementById("discountedticketNr").value);
                            if ((discountedTicketNr + ticketNr) > (sc.find('selected').length)) {
                                $('<li>' + (this.settings.row + 1) + '_' + this.settings.label + '</li>')
                                    .attr('id', 'cart-item-' + this.settings.id)
                                    .data('seatId', this.settings.id)
                                    .appendTo($cart);

                                $counter.text(sc.find('selected').length + 1);
                                $total.text(recalculateTotal(sc) + price);
                                return 'selected';
                            }
                            return this.style();
                        } else if (this.status() == 'selected') { //Checked
                            //Update Number
                            $counter.text(sc.find('selected').length - 1);
                            //update totalnum
                            $total.text(recalculateTotal(sc) - price);

                            //Delete reservation
                            $('#cart-item-' + this.settings.id).remove();
                            //optional
                            return 'available';
                        } else if (this.status() == 'unavailable') { //sold
                            return 'unavailable';
                        } else {
                            return this.style();
                        }
                    }
                });
                sc.find('selected').status('available');
                $cart.empty();
                //sold seat
                var data1 = { "screeningId": screeningId };
                $.ajax({
                    type: "POST",
                    url: "/Home/GetReservatedSeats",
                    data: JSON.stringify(data1),
                    contentType: "application/json; charset=utf-8",
                    success: function (Data) {
                        var uaSeats = Data.split(",");
                        sc.get(uaSeats).status('unavailable');
                    }
                });
                //sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
            }
        });


    });
    //sum total money
    function recalculateTotal(sc) {
        var total = 0;
        sc.find('selected').each(function () {
            total += price;
        });

        return total;
    }

    function refreshMap(sc) {
        sc.find('selected').status('available');
    }
    </script>
}